<template>
  <div class="fixed-table-filter">
    <el-form :inline="true" :model="formItem" class="form-filter" size="mini">
      <el-form-item>
        <el-input v-model="formItem.s_name" placeholder="请输入合同名称..." />
      </el-form-item>
      <el-form-item>
        <el-input v-model="formItem.s_code" placeholder="请输入合同编码..." />
      </el-form-item>
      <el-form-item>
        <el-input v-model="formItem.s_supplierName" placeholder="请输入供应商名称..." />
      </el-form-item>
      <!-- <el-form-item>
        <el-select v-model="formItem.s_paymentStatus" placeholder="请选择付款状态">
          <el-option v-for="item in paymentStatuOptionList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button plain icon="el-icon-search" @click="search">查询</el-button>
        <el-button plain icon="el-icon-refresh-left" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 定义一个查询表单原始项
const formItem = {
  s_name: '',
  s_code: '',
  s_supplierName: ''
}

export default {
  name: 'ContractTableFilter',
  data() {
    return {
      formItem: {
        ...formItem
      }
      // ,paymentStatuOptionList: [
      //   { label: '未付款', value: false },
      //   { label: '已付款', value: true }
      // ]
    }
  },
  methods: {
    // 查询按钮点击事件处理
    search: function() {
      this.$parent.filter(this.formItem)
    },
    // 重置按钮点击事件处理
    reset: function() {
      this.formItem = {
        ...formItem
      }
      this.search()
    },
    onChange: function(val) {
      this.$parent.onResize()
    }
  }
}
</script>
